<template>
    <div id="chart-profit"></div>
</template>

<script>
import $ from 'jquery'
import 'jquery-sparkline'

export default {
  name: 'profit-chart',
  data () {
    return {
      profitData: [40, 32, 65, 53, 62, 55, 24, 67, 45, 70, 45, 56, 34, 67, 76, 32, 65, 53, 62, 55, 24, 67, 45, 70, 45, 56, 70, 45, 56, 34, 67, 76, 32, 65, 53, 62, 55]
    }
  },
  mounted () {
    let id = $('#chart-profit')
    let barValueCount = this.profitData.length
    let barSpacing = 1
    let options = {
      type: 'bar',
      height: 55,
      barWidth: Math.round((id.parent().width() - (barValueCount - 1) * barSpacing) / barValueCount),
      barSpacing: barSpacing,
      zeroAxis: false,
      tooltipChartTitle: 'Daily Sales',
      tooltipSuffix: ' Sales',
      barColor: 'rgba(255,255,255,.7)'
    }

    $('#chart-profit').sparkline(this.profitData, options)
  }
}
</script>

<style scoped>

</style>
